<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>教育考试平台_在线考试</title>
    <link href="/css/examMain.css" rel="stylesheet" type="text/css"/>
    <link href="/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/css/test.css" rel="stylesheet" type="text/css"/>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <div class="test_title">
                        <p class="test_time">
                            <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">${map.time}</b>
                        </p>
                        <font><input type="button" onclick="submitPaper()" name="test_jiaojuan" value="交卷"></font>
                    </div>

                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">${map.size}</i><span>题，</span><span>合计</span><i
                                    class="content_fs">${map.totalScope}</i><span>分</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <c:forEach items="${list}" var="paper" varStatus="stauts">
                                <li id="${paper.paperId}">
                                    <div class="test_content_nr_tt">
                                        <i>${stauts.count}</i><span>(${map.scope}分)</span>${paper.title}<b
                                            class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                            <li class="option">
                                                <input type="radio" id="answer_${paper.paperId}_option_1" value="A"
                                                       class="radioOrCheck" name="answer_${paper.paperId}"/>
                                                <label for="answer_${paper.paperId}_option_1">
                                                    A
                                                    <p class="ue" style="display: inline;">.${paper.a}</p>
                                                </label>
                                            </li>

                                            <li class="option">
                                                <input type="radio" id="answer_${paper.paperId}_option_2" value="B"
                                                       class="radioOrCheck" name="answer_${paper.paperId}"
                                                />
                                                <label for="answer_${paper.paperId}_option_2">
                                                    B
                                                    <p class="ue" style="display: inline;">.${paper.b}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" id="answer_${paper.paperId}_option_3" value="C"
                                                       class="radioOrCheck" name="answer_${paper.paperId}"
                                                />
                                                <label for="answer_${paper.paperId}_option_3">
                                                    C
                                                    <p class="ue" style="display: inline;">.${paper.c}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" id="answer_${paper.paperId}_option_4" value="D"
                                                       class="radioOrCheck" name="answer_${paper.paperId}"
                                                />
                                                <label for="answer_${paper.paperId}_option_4">
                                                    D
                                                    <p class="ue" style="display: inline;">.${paper.d}</p>
                                                </label>
                                            </li>

                                        </ul>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            <i class="icon iconfont">&#xe692;</i>答题卡
                        </h1>
                        <p class="test_time">
                            <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">${map.time}</b>
                        </p>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit">${map.size}</i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>

                                <c:forEach items="${list}" varStatus="stauts" var="paper">
                                    <li><a href="#${paper.paperId}">${stauts.count}</a></li>
                                </c:forEach>

                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="/js/jquery.countdown.js"></script>
<script>

    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });

    $(function () {
        $('li.option label').click(function () {

            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            // alert(examId)
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });

    function submitPaper() {
        if (!confirm("确认提交试卷")) {
            return false;
        }
        var answer = "";
        $('input:radio:checked').each(function () {
            // alert($(this).val());
            answer = answer + "," + $(this).val();
        });
        console.log(answer);
        window.location.href = '/exam/returnScope?answer=' + answer;

    }

</script>


</body>

</html>